<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 物料产品选择 </template>
    <div class="container">
      <div class="content">
        <tableTurn :table-data="getMaterialData" ref="tableRef" :args="args">
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            title="物料编码"
            data-index="number"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="150"
            title="物料名称"
            data-index="name"
          >
          </a-table-column>

          <a-table-column
            align="center"
            :width="150"
            title="规格型号"
            data-index="spec"
          >
          </a-table-column>
          <a-table-column
            data-index="basicName"
            align="center"
            :width="100"
            title="基本单位"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="100"
            title="所属分类"
            data-index="materialType"
          >
          </a-table-column>
        </tableTurn>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { getSinglePurchaseOrder } from '@/api/buy-management/buy-order/index';
  // import { cloneDeep } f rom 'lodash';
  import { useRoute } from 'vue-router';

  const route = useRoute();

  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const tableRef = ref();
  const emit = defineEmits(['update:visible', 'selectProductEmit']);
  const getRoleTree = ref<any>([]);

  // 选择器配置
  const args = reactive({
    rowSelection: {
      type: 'radio',
    },
  });

  const id = Number(route.query.id);
  const getMaterialData = async () => {
    try {
      const res: any = await getSinglePurchaseOrder({
        id,
      });
      return Promise.resolve(res.product);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  let form = ref<any>({});

  const rules = reactive({});

  // 确定
  const handleOk = async () => {
    emit('selectProductEmit', tableRef.value.selectedList);
    tableRef.value.selectedList = [];
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  //   watchEffect(() => {
  //     if (modalVisible.value) {
  //       form.value = props.formList;
  //       console.log(form);
  //     }
  //   });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
